<template>
  <div class="dt-nav">
    <div class="dt-nav-logo"><img src="/skb/img/logo.png" alt="" /></div>
    <div class="dt-nav-menu">
      <ul>
        <li @click="changeMenu('pm?tab=list&elTab=0')" :class="{ on: hashName.indexOf('pm-') > -1 }">
          <el-badge :value="projectUnreadCount || ''" class="item"><img src="/skb/img/menu0.png" alt="" /></el-badge>
          <span>项目管理</span>
        </li>
        <li @click="changeMenu('pc?tab=chat')" :class="{ on: hashName === 'pc-chat' || hashName === 'pc-org' }">
          <el-badge :value="customUnreadCount || ''" :max="99" class="item"><img src="/skb/img/menu1.png"
              alt="" /></el-badge><span>私域聊天</span>
        </li>
        <li @click="changeMenu('wt?tab=list&elTab=0')" :class="{ on: hashName === 'wt-liat' }">
          <el-badge :value="taskUnreadCount || ''" class="item"><img src="/skb/img/menu2.png"
              alt="" /></el-badge><span>待办任务</span>
        </li>
        <li @click="changeMenu('ma?tab=list&elTab=0')" :class="{ on: hashName === 'ma-list' }">
          <el-badge :value="auditUnreadCount || ''" class="item"><img src="/skb/img/menu3.png"
              alt="" /></el-badge><span>我的审批</span>
        </li>
        <!-- <li @click="changeMenu('4')" :class="{'on':menuIndex===''}">
          <el-badge :value="12" class="item"><img src="/skb/img/menu4.png" alt=""></el-badge><span>项目资料</span>
        </li> -->
        <li @click="changeMenu('em?tab=list')" :class="{ on: hashName === 'em-list' }">
          <el-badge value="" class="item"><img src="/skb/img/menu5.png" alt="" /></el-badge>
          <span>团队成员</span>
        </li>
        <!-- <li @click="changeMenu('6')" :class="{'on':menuIndex==='6'}">
          <el-badge :value="12" class="item"><img src="/skb/img/menu6.png" alt=""></el-badge><span>账号设置</span>
        </li> -->
        <i :class="['dt-menu-tri', 'dt-tri-' + menuIndex]"></i>
      </ul>
    </div>
    <div class="dt-nav-user">
      <!-- <el-popover placement="right" width="214" trigger="hover" v-model="isShowPopover">
        <div class="dt-down-cont">
          <h4>添加数科帮到电脑桌面</h4>
          <img src="/skb/img/down_logo.png" alt="">
          <el-button v-if="installPromptEvent" @click="installApp" type="primary">立即添加</el-button>
          <el-button v-show="!installPromptEvent" type="primary" disabled>已添加</el-button>
        </div>
        <div class="dt-down" slot="reference"><img src="/skb/img/down.png" alt=""><span>存至桌面</span></div>
      </el-popover> -->
      <div class="dt-head-box">
        <el-image :src="$tools.getStsFileUrl(secret_uid, head_img)" @load="$tools.loadImgCenter($event, 36)"
          @click.stop="showSendHome">
          <div slot="placeholder" class="image-slot">
            <i class="el-icon-loading"></i>
          </div>
        </el-image>
      </div>
      <span :title="uname">{{ uname | filterUserName }}</span>
    </div>
    <div class="dt-nav-out" @click="loginOutConfirm">
      <i class="el-icon-switch-button"></i>
      <span>退出</span>
    </div>
    <!-- 个人信息页 -->
    <el-card :class="['box-card', 'dt-home-info', 'up']" v-show="is_show_menu_home">
      <div v-show="!home_info.id" v-loading="true" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"></div>
      <dl v-show="home_info.id">
        <dt>
          <div class="dt-home-head-img">
            <el-image :src="$tools.getStsFileUrl(secret_uid, home_info.headimg)" alt=""
              @load="$tools.loadImgCenter($event, 52)">
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading"></i>
              </div>
            </el-image>
          </div>
          <div class="dt-home-realName">
            <div>
              <h3>{{ (home_info.certificateName ? home_info.certificateName : 'UID' + home_info.id) | filterMemberName
                }}</h3>
              <i v-if="home_info.gender != 0" :class="{ boy: home_info.gender == 1 }"></i>
            </div>
            <p class="dt-home-uid">UID{{ home_info.id }}</p>
          </div>
        </dt>
        <dd class="dt-home-dd">
          <div>
            <span class="dt-home-label">地区</span>
            <span class="dt-home-cont">{{ home_info.liveplace ? home_info.liveplace : '暂未设置' }}</span>
          </div>
          <div>
            <span class="dt-home-label">
              IP
              <el-popover popper-class="home-popover" placement="top-start" title="响应「互联网用户账号信息管理规定」，维护网络安全，展示IP属地"
                width="200" trigger="hover" content="IP 属地以网络运营商提供的信息为准，与地理位置可能不一致">
                <template #reference>
                  <!-- 图标作为触发元素 -->
                  <i class="el-icon-question" style="cursor: pointer; color: #ced2db; font-size: 16px"></i>
                </template>
              </el-popover>
            </span>
            <span class="dt-home-cont">{{ home_info.lastLoginAddress ? home_info.lastLoginAddress : '暂未设置' }}</span>
          </div>
        </dd>
        <dd>
          <div>
            <span class="dt-home-label">个性签名</span>
            <span class="dt-home-cont">{{ home_info.personalSignature ? home_info.personalSignature : '暂未设置' }}</span>
          </div>
        </dd>
      </dl>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      secret_uid: this.$store.state.uid,
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      uname: decodeURIComponent(this.$store.state.uname),
      head_img: decodeURIComponent(this.$store.state.head_img),
      isShowPopover: false,
      menuList: ['pm', 'pc', 'wt', 'ma', 'em'],
      //menuList: ['pm', 'pc', 'em'],
      menu: { pm: '项目管理', pc: '私域聊天', wt: '代办任务', ma: '我的审批', em: '团队成员' },
      dataCard: { name: '' },
      // 审批未读数
      auditUnreadCount: 0,
      // 自建群未读数
      customUnreadCount: 0,
      // 项目未读数
      projectUnreadCount: 0,
      // 任务未读数
      taskUnreadCount: 0,
      // 总未读数
      totalUnreadCount: 0,
      home_info: {},
      is_show_menu_home: false
    }
  },
  computed: {
    hashName() {
      return this.$tools.getHashName(this)
    },
    menuIndex() {
      var name = this.$route.hash.split('?')[0].split('/')[1]
      return this.menuList.indexOf(name) > -1 ? this.menuList.indexOf(name) : 0
    },
    installPromptEvent() {
      return this.$store.state.installPromptEvent
    }
  },
  filters: {
    filterUserName(val) {
      return val.length > 3 ? val.substring(0, 3) + '...' : val
    },
    filterMemberName(val) {
      return val.length > 7 ? val.substring(0, 7) + '...' : val
    }
  },
  methods: {
    goProject() {
      this.$alert('即将离开本站，访问中交数科平台，是否继续？', '提示', {
        confirmButtonText: '确定'
      })
        .then(() => {
          if (window.electron) {
            window.electron.ipcRenderer.send('electron:openUrl', 'https://www.ccccdt.com/mySubContractProject')
          } else {
            window.open('https://www.ccccdt.com/mySubContractProject')
          }
        })
        .catch(() => { })
    },
    changeMenu(name) {
      var query = { hashName: this.hashName, fullPath: name },
        newHashName = name.split('&')[0].split('?tab=')
      newHashName = newHashName.join('-')
      if (name.indexOf('elTab') > 0) {
        query.elTab = '0'
      }
      this.$router.push('/main/#/' + name)
      if (newHashName === this.hashName) {
        //当前页面 强制调用
        this.$tools.setTabs(this, this.secret_uid, 'open', query)
      }
    },
    //超时自动退出
    timeOutLogin() {
      this.clearCookie()
      this.$alert('由于长时间未操作，您已退出登录', '提示', {
        confirmButtonText: '确定'
      })
        .then(() => { })
        .catch(() => { })
    },
    //app端退出网页端
    appOutLogin() {
      // this.loginOut()
      this.clearCookie()
      this.$alert('您已在APP端操作退出登录', '提示', {
        confirmButtonText: '确定'
      })
        .then(() => { })
        .catch(() => { })
    },
    //异地登陆顶掉
    insteadLogin() {
      this.$msgbox.close()

      this.clearCookie()
      this.$alert('您的账户已经在其他设备登录，如非本人操作，请尽快修改密码', '提示', {
        confirmButtonText: '确定'
      })
        .then(() => { })
        .catch(() => { })
    },
    loginOutConfirm() {
      this.$confirm('确认退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'dt-button-cancle is-plain',
        type: 'warning'
      })
        .then(() => {
          this.loginOut()
        })
        .catch(() => { })
    },
    loginOut() {
      var data = [{ user_id: this.uid }],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/User_Web_Login_Out'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      return Promise.all(dataAxios)
        .then((response) => {
          return this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.clearCookie()
              this.clearLocalStorage()
              this.$socket.close() //关闭sokcet.io
              if (window.electron) {
                window.electron.ipcRenderer.send('electron:logout')
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000
              })
            }
          })
        })
        .catch((error) => { })
    },
    clearLocalStorage() {
      localStorage.removeItem('createPmRuleForm')
      localStorage.removeItem('orderRuleFormCk')
      localStorage.removeItem('orderRuleFormOut')
    },
    clearCookie() {
      // 设置服务器cookie
      //this.$cookies.remove('uid', { domain: '.ccccdt.com', path: '/' })
      this.$cookies.remove('uid')
      this.$cookies.remove('guid')
      this.$cookies.remove('uname')
      this.$cookies.remove('head_img')
      this.$cookies.remove('uphone')
      this.$cookies.remove('pure_user_ids')
      this.$cookies.remove('tabs')

      this.$store.commit('setUid', '')
      this.$store.commit('setGuid', '')
      this.$store.commit('setUname', '')
      this.$store.commit('setHeadImg', '')
      this.$store.commit('setUphone', '')
      this.$store.commit('setUphone', '')
      this.$store.commit('setPureUserIds', '')
      this.$store.commit('setTabs', '')

      this.$socket.close() //关闭socketio
      this.$router.push('/skb_login/')
    },
    installApp() {
      this.isShowPopover = false
      const deferredPrompt = this.installPromptEvent
      if (deferredPrompt) {
        deferredPrompt.prompt()
        deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
            console.log('User accepted the A2HS prompt')
          } else {
            console.log('User dismissed the A2HS prompt')
          }
          // Clear the saved prompt since it can't be used again
          this.$store.commit('setInstallPromptEvent', null)
        })
      } else {
        console.log('No deferred prompt available')
      }
    },
    // 获取用户所有未读数
    getAllUnread() {
      var data = [
        {
          userId: this.uid
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/getAllUnread'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.auditUnreadCount = data.data.auditUnreadCount
              this.customUnreadCount = data.data.customUnreadCount
              this.projectUnreadCount = data.data.projectUnreadCount
              this.taskUnreadCount = data.data.taskUnreadCount
              this.totalUnreadCount = data.data.totalUnreadCount
            }
          })
        })
        .catch((error) => { })
    },
    //聊天头像个人主页
    showSendHome() {
      this.is_show_menu_home = true
      this.$root.$emit('shortcutMenuOffEvent')
      this.$root.$emit('childShortcutMenuEvent')
    },
    getUserCardInfo() {
      var data = [{ userId: this.uid, loginType: 1 }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/user/userInfo'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.home_info = data.data
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    }
  },
  mounted() {
    var timer = setInterval(() => {
      if (this.$socket) {
        clearInterval(timer)
        this.$socket.on('menu_unread', (data) => {
          var _data = JSON.parse(data)
          if (_data.menuIndex == 1) {
            this.projectUnreadCount = _data.unread
          } else if (_data.menuIndex == 2) {
            this.customUnreadCount = _data.unread
          } else if (_data.menuIndex == 3) {
            this.taskUnreadCount = _data.unread
          } else if (_data.menuIndex == 4) {
            this.auditUnreadCount = _data.unread
          }
        })
        this.$socket.on('web_logout', (data) => {
          var _data = data
          if (!_data) {
            //没有guid app端退出网页端
            this.appOutLogin()
          } else {
            //有guid但不等 web端异地登录
            if (this.$store.state.guid != _data) {
              this.insteadLogin()
            }
          }
          this.$socket.close() //关闭sokcet.io
        })
        this.$socket.on('web_timeout_logout', (data) => {
          //超时退出
          this.timeOutLogin()
          this.$socket.close() //关闭sokcet.io
        })
      }
    }, 10)
    this.getAllUnread()
    this.getUserCardInfo() //获取用户卡片
    this.$root.$on('menuHeadCardOff', () => {
      this.is_show_menu_home = false
    })

    //隐藏头像卡片
    $(document).on('click contextmenu', () => {
      this.is_show_menu_home = false
    })
  }
}
</script>
<style scoped>
.dt-nav {
  width: 70px;
  padding-top: 20px;
  background: linear-gradient(to bottom, #2f54eb, #7772ff);
  text-align: center;
  position: relative;
  font-size: 12px;
  color: #fff;
}

.dt-nav-logo {
  margin-bottom: 28px;
}

.dt-nav-menu ul {
  position: relative;
}

.dt-nav-menu .dt-menu-tri {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid #fff;
  right: 0;
  top: 30px;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu .dt-menu-tri.dt-tri-0 {
  top: 30px;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu .dt-menu-tri.dt-tri-1 {
  top: 110px;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu .dt-menu-tri.dt-tri-2 {
  top: 190px;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu .dt-menu-tri.dt-tri-3 {
  top: 270px;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu .dt-menu-tri.dt-tri-4 {
  top: 350px;
  transition: top 0.3s ease 0s;
}

.dt-nav-menu ul li,
.dt-down {
  cursor: pointer;
  padding: 20px 0 18px;
  position: relative;
  background-color: transparent;
  transition: background-color 1s ease-out 0s;
}

.dt-nav-menu ul li:hover {
  background-color: #3b53d8;
  transition: background-color 1s ease-out 0s;
}

.dt-nav-menu ul li.on {
  background-color: #3047bf;
  transition: background-color 1s ease-out 0s;
}

.dt-nav-menu ul li .el-badge {
  display: block;
  width: 28px;
  margin: 0 auto 4px;
}

.dt-nav-menu ul li .el-badge>>>sup {
  border: 0;
  right: 15px;
}

.dt-down img {
  display: block;
  margin: 0 auto 4px;
}

.dt-down {
  margin-bottom: 20px;
}

.dt-down-cont h4 {
  font-weight: normal;
}

.dt-down-cont img {
  margin: 12px 0px;
}

.dt-down-cont>>>.el-button {
  width: 100%;
  padding: 8px 20px;
}

.dt-nav-user {
  position: absolute;
  bottom: 50px;
  width: 70px;
  cursor: pointer;
}

.dt-nav-user .dt-head-box {
  display: block;
  margin-bottom: 4px;
}

.dt-nav-user .dt-head-box .el-image {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #fff;
}

.dt-nav-user .dt-head-box .el-image>>>img {
  width: auto;
  height: auto;
}

.dt-nav-user .dt-head-box .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.dt-nav-out {
  width: 70px;
  position: absolute;
  bottom: 20px;
  cursor: pointer;
}

/* 个人信息页 */
.dt-home-info {
  position: absolute;
  top: -3px;
  left: 55px;
  border-radius: 8px;
  width: 312px;
  z-index: 11;
}

.dt-home-info.left {
  top: -3px;
  left: -318px;
}

.dt-home-info.up {
  bottom: 90px;
  top: inherit;
}

.dt-home-info.left.up {
  bottom: 20px;
  top: inherit;
}

.dt-home-info>>>.el-card__body {
  width: 280px;
  min-height: 188px;
  padding: 16px 16px 10px;
}

.dt-home-info dt {
  display: flex;
  display: -webkit-flex;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.dt-home-info .dt-home-head-img {
  display: block;
  margin-right: 18px;
  width: 52px;
  height: 52px;
}

.dt-home-info .dt-home-head-img .el-image {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.dt-home-info .dt-home-head-img .el-image>>>img {
  width: auto;
  height: auto;
}

.dt-member-item-headimg .el-image .image-slot {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.dt-chat-content-headimg {
  cursor: pointer;
}

.dt-home-info .dt-home-realName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.dt-home-realName h3 {
  color: #1f1f1f;
  height: 22px;
  line-height: 22px;
}

.dt-home-realName div {
  display: flex;
  align-items: center;
}

.dt-home-realName i {
  display: block;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  background: url(/skb/img/girl.png) no-repeat center;
}

.dt-home-realName i.boy {
  background: url(/skb/img/boy.png) no-repeat center;
}

.dt-home-uid {
  font-size: 12px;
  color: #909399;
  height: 22px;
  line-height: 22px;
}

.dt-home-info dd {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  line-height: 20px;
}

.dt-home-info dd div {
  padding: 5px 0px;
  display: flex;
  display: -webkit-flex;
}

.dt-home-info .dt-home-dd {
  padding: 10px 0px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.dt-home-info span {
  font-size: 14px;
  text-align: left;
}

.dt-home-info .dt-home-label {
  display: block;
  width: 70px;
  color: #909399;
}

.dt-home-info .dt-home-cont {
  width: 210px;
  color: #1f1f1f;
}

.dt-home-info>>>.el-loading-parent--relative {
  top: 100px;
}

/* 个人信息页 */
</style>
